<script setup lang="tsx">

import { reactive, ref } from 'vue';
import { PageEntity } from '@/entity/page.entity';
import { useTable } from '@/hooks/common/table';
import { postAction } from '@/service/request/action';
import {
  createOpenCourseInfoApi,
  deleteOpenCourseInfoApi,
  getOpenCourseInfoPageApi
} from '@/service/path/train/course';
import OpenCourseInfoSearch from '@/views/train/course/modules/open-course-info-search.vue';
import OpenCourseInfoModal from '@/views/train/course/modules/open-course-info-modal.vue';
import { StatusMessage } from '@/enum';

interface Props {
  courseId: string;
}
interface Emits {
  (e: 'clickBack'): void
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

const openCourseInfoModalRef = ref();
const state = reactive({
  pageInfo: new PageEntity(),
  opPath: {
    createPath: createOpenCourseInfoApi,
    updatePath: ''
  }
});
const {
  columns,
  columnChecks,
  data,
  loading,
  mobilePagination,
  searchParams,
  getData,
  clickSearch,
  clickReset
} = useTable({
  apiFn: () => postAction(getOpenCourseInfoPageApi, state.pageInfo),
  showTotal: true,
  immediate: true,
  apiParams: {
    studentName: '',
    courseId: props.courseId
  },
  pageInfo: state.pageInfo,
  columns: () => [
    {
      title: '序号',
      key: 'index'
    },
    {
      title: '课程名称',
      key: 'courseName'
    },
    {
      title: '学生姓名',
      key: 'studentName'
    },
    {
      title: '学生课时数',
      key: 'classHours'
    },
    {
      title: '添加时间',
      key: 'createTime'
    },
    {
      title: '操作',
      key: 'action',
      render: (row: Api.Train.OpenCourseInfo) => <common-operate-column
        row-data={row} visible-edit={false}
        onClickDelete={row => clickDelete(row.id)}
      />
    }
  ]
});
const clickAdd = () => {
  openCourseInfoModalRef.value.openDialog(props.courseId);
};
const clickDelete = (id: string) => {
  postAction(deleteOpenCourseInfoApi, {
    id
  }).then(res => {
    if (!res.error) {
      window.$message?.success(StatusMessage.SUCCESS);
      getData();
    }
  });
};
const clickBack = () => {
  emit('clickBack');
};
</script>

<template>
  <div class="flex-col-stretch gap-16px lt-sm:overflow-auto position-relative">
    <n-button class="back-btn" @click="clickBack">返回</n-button>
    <OpenCourseInfoSearch v-model:model="searchParams" @click-reset="clickReset" @click-search="clickSearch" />
    <n-card title="开课信息列表" class="flex-1">
      <template #header-extra>
        <TableHeaderOperation
          v-model:columns="columnChecks"
          :loading="loading"
          @click-add="clickAdd"
        />
      </template>
      <n-data-table
        :columns="columns"
        :data="data"
        :loading="loading"
        remote
        :row-key="row => row.id"
        :pagination="mobilePagination"
        class="sm:h-full"
      />
    </n-card>
    <OpenCourseInfoModal ref="openCourseInfoModalRef" @refresh-list="getData" />
  </div>
</template>

<style scoped lang="scss">
  .back-btn{
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 999;
  }
</style>
